<template>
	<div class="partnerList">
		<div class="partnerList_top">
			<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 10px;">
			  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			  <el-breadcrumb-item :to="{ path: '/xcxPlayer' }"
			    >直播列表</el-breadcrumb-item
			  >
			  <el-breadcrumb-item>直播中奖用户</el-breadcrumb-item>
			</el-breadcrumb>
			<!-- <div class="current">直播中奖用户<i class="el-icon-close"></i></div> -->
		</div>
		<div class="partnerList_bottom">
			<div class="partnerList_bottom_new">
				<div class="partnerList_bottom_new_goods">
					<div class="partnerList_bottom_new_goods_screening">
						<div class="item">
							<span>发放状态</span>
							<el-select v-model="status" clearable @change="selectStatus" placeholder="请选择">
								<el-option v-for="item in statusList" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
							</div>
							<div class="item">
							<span>到账状态</span>
							<el-select v-model="status_rec" clearable @change="status_arrival" placeholder="请选择">
								<el-option v-for="item in arrival" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
							</div>
							<div class="item inputBox">
							<el-input v-model="user_info" placeholder="用户昵称手机号搜索"></el-input>
							</div>
							<div class="item">
							<el-input v-model="room_info" placeholder="直播房间搜索"></el-input>
						    </div>
							<div class="item">
								<button @click="handerSeach" class="searchBtn"><i class="el-icon-search"></i>搜索</button>
							</div>
					</div>
				</div>
			</div>
			<div class="partnerList_table">
				<div class="partnerList_bottom_table">
					<table>
						<tr>
							<th></th>
							<th>序号</th>
							<th>房间名称</th>
							<th>直播房间</th>
							<th>类型</th>
							<th>手机号</th>
							<th>用户昵称</th>
							<th>头像</th>
							<th>下发时间</th>
							<th>发放状态</th>
							<th>到账状态</th>
							<th>创建时间</th>
							<!-- <th>操作</th> -->
						</tr>
						<tr v-for="(v,i) in listData" :key="i">
							<td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}"
									@click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
							<td>{{v.id}}</td>
							<td>{{v.roomname}}</td>
							<!-- <td>{{v.status==0?'隐藏':v.status==1?'显示':''}}</td> -->
							<td>
								{{v.roomid}}
							</td>
							<td>
								<el-tag v-if="v.luck_type == 1">抽奖中奖</el-tag>
								<el-tag v-if="v.luck_type == 2" type="info">邀请满XX人</el-tag>
							</td>
							<td>
								{{v.mobile}}
							</td>
							<td>
								{{v.nickname}}
							</td>
							<td>
								<div style="width: 80px;height: 80px;overflow: hidden;margin:4px auto;">
									<img :src="v.avatar" style="width: 100%;height: 100%;">
								</div>
							</td>
							<td>
								<template v-if="v.payed_at">
									{{formatDate(v.payed_at)}}
								</template>
								<template v-else>
									---
								</template>
							</td>
							<td>
								<el-tag v-if="v.status == 1">已下发</el-tag>
								<el-tag v-else type="info">未下发</el-tag>
							</td>
							<td>
								<el-tag v-if="v.status_rec == 1">已到账</el-tag>
								<el-tag v-else type="info">未到账</el-tag>
							</td>
							<td>
								{{v.created_at}}
							</td>
							<!-- <td>
								<button class="editor shelves"  @click="toChangeStatus(v.id)">编辑</button>
							</td> -->
						</tr>
						<tr v-if="listData.length == 0">
							<td class="table_title" colspan="10">当前数据空空如也</td>
						</tr>
					</table>
					<div class="partnerList_bottom_page">
						<div class="partnerList_bottom_page_left">
							<div class="partnerList_bottom_page_left_checkAll" @click="handerCheckAll">
								<font class="checkbox" :class="{'check_active' : checkAll}"><i
										class="el-icon-check"></i></font>
							</div>全选
							<!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
						</div>
						<div class="partnerList_bottom_page_right">
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
								:current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
								layout="total, sizes, prev, pager, next, jumper" :total="total" background>
							</el-pagination>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				listData: [],
				cate: {},
				input: '',
				checkAll: false,
				page: 1,
				pageSize: 10,
				total: 0,
				checkBoxAll: [], // 选中的数据
				shelvesAlls: [],
				tableList: [],
				room_id: '', //直播房间
				status_rec:'',//是否到账
				status:'',//是否下发
				statusList: [{
					label: '未下发',
					value: '0'
				}, {
					label: '已下发',
					value: '1'
				}],
				arrival: [{
					label: '未到账',
					value: '0'
				}, {
					label: '已到账',
					value: '1'
				}],
				room_info:'',//直播房间
				user_info:'',//用户信息
			}
		},
		mounted(options) {
			let room_id = this.$route.query.room_id
			this.room_id = room_id;
			this.getShareList(room_id)
		},

		methods: {
			// 获取小程序直播用户中奖列表
			getShareList(room_id) {
				let params = {
					room_info: room_id,
					user_info:this.user_info,
					status:this.status,
					status_rec:this.status_rec,
					page: this.page,
					pagesize: this.pageSize
				}
				let that = this;
				that.$http.post('/api/root/wx/live/luck/user/records', params).then(res => {
					if (res.code === 1) {
						var data = res.data.records
						if (data.length > 0) {
							that.total = res.data.count
							that.listData = data
						} else {
							that.total = 0
							that.listData = []
						}
					} else {
						that.$message.error(res.msg)
					}
				}).catch(err => {
					that.$message.error(err.msg ? err.msg : err.toString())
				})
			},
			// 更改状态
			toChangeStatus(id, sta) {
				this.MadalTitle = "编辑直播"
				this.visible = true
			},
			// 搜索
			handerSeach() {
				if(this.room_info){
					this.getShareList(this.room_info)
				}else{
					this.getShareList(this.room_id)
				}
			},

			// 详情按钮
			toEdit(id) {
				this.$router.push({
					name: 'estateAdd',
					query: {
						id
					}
				})
			},

			// 到账状态
			status_arrival() {
				this.page = 1
				this.getShareList(this.room_id)
			},
			
			// 选择状态
			selectStatus() {
				this.page = 1
				this.getShareList(this.room_id)
			},
			// 多选
			handlerCheckbox(i) {
				console.log(i);
				let arr = this.checkBoxAll;
				if (arr.includes(i)) {
					let index = arr.indexOf(i);
					if (index != -1) {
						arr.splice(index, 1);
						this.shelvesAlls.splice(index, 1);
						if (this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				} else {
					this.checkBoxAll.push(i);
					this.shelvesAlls.push(this.tableList[i].id);
					if (this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				console.log(this.shelvesAlls);
			},
			// 全选与全不选
			handerCheckAll() {
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				this.shelvesAlls = [];
				if (this.checkAll) {
					for (let i = 0; i < arr; i++) {
						this.checkBoxAll.push(i);
					}
					this.checkBoxAll.map(v => {
						this.shelvesAlls.push(this.tableList[v].id.toString());;
					})
				} else {
					this.checkBoxAll = [];
					this.shelvesAlls = []
				}
				console.log(this.shelvesAlls);
			},



			handleSizeChange(val) {
				this.pageSize = val;
				this.getShareList(this.room_id)
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getShareList(this.room_id)
			},
			formatDate(value) {
				let date = new Date(parseInt(value) * 1000);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				let d = date.getDate();
				d = d < 10 ? "0" + d : d;
				let h = date.getHours();
				h = h < 10 ? "0" + h : h;
				let minute = date.getMinutes();
				let second = date.getSeconds();
				minute = minute < 10 ? "0" + minute : minute;
				second = second < 10 ? "0" + second : second;
				return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
			}
		}
	}
</script>

<style lang="less" scoped>
	@import 'index.less';
	.partnerList_bottom_new_goods_screening{
		width: 100%;
		height: auto;
		display: flex;
		
		.searchBtn{
			max-width: 90px;
			min-width:68px;
			height: 42px;
			line-height:42px;
			background-color: #409EFF;
			margin-left: 5px;
			border: 0 none;
			outline: none;
			border-radius: 4px;
			color: #fff;
			cursor: pointer;
		}
		.inputBox{
			margin-right: 20px;
		}
	}
</style>
